<template>
  <div>
    <h1>购物车</h1>
    <button @click="fn1">添加 Banana 进入购物车</button>
    <br />
    <br />
    <button @click="fn2">购买，调用后台的接口去付帐</button>
    <!-- 
      购物成功，显示 vue 的 logo
      否则显示，购物车列表
     -->
    <ul>
      <li v-for="item in cartList" :key="item.id">{{ item.name }}</li>
    </ul>

    <img v-if="isOk" src="../assets/logo.png" alt="" />
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";

export default {
  computed: {
    ...mapState(["cartList", "isOk"]),
  },
  // computed: {
  //   cartList() {
  //     return this.$store.state.cartList;
  //   },
  // },

  methods: {
    ...mapMutations(["addGood"]),
    ...mapActions(["pay"]),
    fn1() {
      // this.$store.commit("addGood", "Banana");
      this.addGood("Banana");
    },
    fn2() {
      // this.$store.dispatch("pay");
      this.pay();
    },
  },
};
</script>
